﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>查看项目</title>
    <link href="./css/bootstrapValidator.css" rel="stylesheet">
    <link href="./css/normalize.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
    <link href="./serviceItem/dist/summernote.css" rel="stylesheet">
    <script src="./js/jquery/jquery.js"></script>
    <script src="./js/bootstarp/bootstrap.js"></script>
    <script src="./js/bootstarp/bootstrapValidator.js"></script>
    <script src="serviceItem/dist/summernote.js"></script>
    <script src="serviceItem/dist/lang/summernote-zh-CN.js"></script>    <!-- 中文-->
    <script src="serviceItem/js/constants.js"></script>
    <script src="./js/language/zh_CN.js"></script>
    <script src="serviceItem/js/function.js"></script>
    <style>
        .red{
            color: red;
        }
        .m {
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .wh200 {
            width: 200px;
            height: 200px;
        }

        .wh10 {
            width: 10px;
            height: 10px;
        }

        .f_left {
            float: left;
        }

        #radio {
            width: 10px;
            height: 10px;
        }

    </style>

    <script>
        //1,编辑状态,0非编辑状态
        let editor=0;
 $(function (){
     //默认富文本框不显示,直接展示详情
     $("#detailsBody").show();
     $("#summernoteBody").hide();
     //更新
     //提交更新服务项
     $("#submit").click(function () {
         if ($("#submit").prop("disabled")=='disabled')
             return;
         //判断详情是否被更新,详情不能小于11个字
         $details=$('#summernote').summernote('code');
         if ($details.length<=11)
         {
             $details=$("#details").html();
         }

         $(".item").attr("disabled","disabled")
         let serviceItemPage={
             title:$("#title").val(),
             titlePageImgUrl:$("#titleImg").prop("src"),
             priceUnit:$("#priceUnit").val(),
             priceOneHour:$("#priceOneHour").val(),
             priceEmployee:$("#priceEmployee").val(),
             priceOnce:$("#priceOnce").val(),
             startWork:$("#startWork").val(),
             offWork:$("#offWork").val(),
             weekendWork:$("#weekendWork").val(),
             setValidTime:$("#setValidTime").val(),
             setIValidTime:$("#setIValidTime").val(),
             tag:$("#tag").val()
         }
         console.log(serviceItemPage)
         //提交表单
         $.ajax({
             url:SERVICEITEM_UPDATE,
             type:"POST",
             data:{
                 itemDetails: $details,
                 itemPage:JSON.stringify(serviceItemPage),
             },
             success(res)
             {
                 alert(res.msg);
             }
         })
     })
     //默认只能观看
     $(".item").attr('disabled','disabled');
     //初始化
    //两次异步，分别获取页面配置属性和服务详情
     let init=0;//初始化完成计量,2时表示初始化完成，可供修改
     //获取页面配置属性
     //获取页面配置属性
     $.ajax({
         url: SERVICEITEM_GETPAGE,
         data: {aid: 4399},
         success(res) {
             if (res.code===200)
             {
                 let data = res.data;
                 //页面赋值
                 $("#title").val(data.title);
                 $("#titleImg").prop("src", data.titlePageImgUrl);
                 $("#priceUnit").val(data.priceUnit);
                 $("#priceOneHour").val(data.priceOneHour);
                 $("#priceEmployee").val(data.priceEmployee);
                 $("#priceOnce").val(data.priceOnce);
                 $("#startWork").val(data.startWork);
                 $("#offWork").val(data.offWork);
                 if(data.weekendWork!=1){
                     //周末不工作
                    $(".weekendWork").hide();
                     $("#weekendWork").val(0);
                 }
                 else {
                     $("#weekendWork").attr('checked','checked');
                     $("#weekendWork").val(1);
                 }
                 $("#setValidTime").val(data.setValidTime);
                 $("#setIValidTime").val(data.setIValidTime);
                 $("#tag").val(data.tag)
                 init++;
                 if (init==2){$("#update").removeAttr("disabled")}
             }
         }
     })
     //获取页面详情
     $.ajax(
         {
             url: SERVICEITEM_GETDETAILS,
             data: {aid:"4399"},
             success(res) {
                 if (res.code==200)
                 {
                     let data=res.data;
                     $("#details").html(data.detailsContext);
                 }
                 init++;
                 if (init==2){$("#update").removeAttr("disabled")}
             }
         }
     )
     //点击修改按钮开启编辑
     $("#update").click(function () {
         $(".item").removeAttr("disabled");
         $(".weekendWork").show();
         editor=1;
     })
     //规则校验
     $("#itemForm").bootstrapValidator({
         //通用错误提示信息
         message:"账号信息出错，请检查重试",
         //状态样式设置
         feedbackIcons:{
             //有效值样式
             valid:"glyphicon glyphicon-ok",
             //错误值样式
             invalid:"glyphicon glyphicon-remove",
             //校验时的样式
             validating: "glyphicon glyphicon-refresh"
         },
         //根据name属性值设置字段规则
         fields:{
             title:{
                 message: "标题最大长度20",
                 validators:{
                     notEmpty:{message:"标题不能为空"},
                 }
             },
             titlePageImgUrl:{
                 message:"封面图片不是标准的图片文件",
                 validators: {
                     notEmpty: {message:"封面图片不能为空"}
                 }
             },
             priceUnit:{
                 message:"单价格式错误,只能为整数价格",
                 validators:{
                     notEmpty:{message:"单价不能为空"},
                 }
             },
             priceOneHour:{
                 message:"单价格式错误,只能为整数价格",
                 validators:{
                     notEmpty:{message:"单价不能为空"},
                 }
             },
             priceEmployee:{
                 message:"单价格式错误,只能为整数价格",
                 validators:{
                     notEmpty:{message:"单价不能为空"},
                 }
             },
             priceOnce:{
                 message:"单价格式错误,只能为整数价格",
                 validators:{
                     notEmpty:{message:"单价不能为空"},
                 }
             },
         }
     })
     //上传图片,获取url
     $("#file").change(function (){
         if (!$(this).val()){return}
         var fileData = new FormData();
         fileData.append("file", $('#file')[0].files[0]);
         console.log($('#file')[0].files[0])
         $.ajax({
             url:IMG_UPLOAD_URL,
             type: "POST",
             contentType: false,
             processData: false,
             data:fileData,
             success(res){
                 $("#titleImg").attr("src",JSON.parse(res.data).img_url);
             }
         })
     })
     //点击详情，清空
     $("#details").click(function (){
         if (editor==1) {
             $("#detailsBody").hide();
             $("#summernoteBody").show();
         };
     })
     //重写summernote.js图片上传回调函数
     $('#summernote').summernote({
         height: 600,
         tabsize: 2,
         lang: 'zh-CN',
         //重写的图片上传回调函数
         callbacks: {
             // onImageUpload callback
             onImageUpload: function (files) {
                 // upload image to server and create imgNode...
                 var data = new FormData();
                 data.append("file", files[0]);
                 //通过ajax异步请求访问图片上传服务器，并替换img src属性地址
                 $.ajax({
                     data: data,
                     type: "POST",
                     url: IMG_UPLOAD_URL,
                     cache: false,
                     contentType: false,
                     processData: false,
                     dataType: "json",
                     success: function (res) {
                         //调用插入图片的方法,summernote(插入图片方法名,url,img标签名)
                         $('#summernote').summernote('insertImage', JSON.parse(res.data).img_url, 'img');
                     },
                     error: function () {
                         alert("上传失败");
                     }
                 });
             }
         }
     });
 })
    </script>

</head>

<body>
<div class="container-fluid">
    <div class="row  cl" >
        <div class="" id="body">
            <header class="page-header bg-primary clearfix">
                <h3 class="text-center">美景家政信息平台</h3>
            </header>
            <form class="form-horizontal" id="itemForm">
                <!--标题-->
                <div class="form-group">
                    <label for="title" class="item col-sm-2 control-label">标题</label>
                    <div class="col-sm-4">
                        <input type="text" name="title" class="item form-control" id="title" placeholder="请输入项目标题，最大不超过20个字">
                    </div>
                </div>
                <!--封面图片-->
                <div class="form-group">
                    <label for="file" class="col-sm-2 control-label">封面图片</label>
                    <div class="col-sm-2">
                        <img src="#" class="wh200" id="titleImg">
                        <input type="file" name="file" class="item form-control" id="file">
                    </div>
                </div>
                <!--详情-->
                <div class="form-group">
                    <label for="summernote" class="col-sm-2 control-label">详情</label>
                    <div class="m col-lg-5" id="summernoteBody">
                        <div id="summernote"></div>
                    </div>
                    <div class="m col-lg-5" id="detailsBody">
                        <div id="details"></div>
                    </div>
                </div>
                <!--面积单价-->
                <div class="form-group">
                    <label for="priceUnit" class="col-sm-2 control-label">面积单价</label>
                    <div class="col-sm-2 ">
                        <input type="number" name="priceUnit" class="item form-control" id="priceUnit" placeholder="请输入面积单价">
                    </div>
                    <label class="control-label">元/平米</label>
                </div>
                <!--时长单价-->
                <div class="form-group">
                    <label for="priceOneHour" class="col-sm-2 control-label">时长单价</label>
                    <div class="col-sm-2">
                        <input type="number" name="priceOneHour" class="item form-control" id="priceOneHour"
                               placeholder="请输入时长单价">
                    </div>
                    <label class=" control-label">元/小时</label>
                </div>
                <!--人数单价-->
                <div class="form-group">
                    <label for="priceEmployee" class="col-sm-2 control-label">人数单价</label>
                    <div class="col-sm-2">
                        <input type="number" name="priceEmployee" class="item form-control" id="priceEmployee"
                               placeholder="请输入人数单价">
                    </div>
                    <label class=" control-label">元/人</label>
                </div>
                <!--频次-->
                <div class="form-group">
                    <label for="priceOnce" class="col-sm-2 control-label">频次</label>
                    <div class="col-sm-2">
                        <input type="number" name="priceOnce" class="item form-control" id="priceOnce" placeholder="请输入每次价格">
                    </div>
                    <label class=" control-label">元/次</label>
                </div>
                <!--服务时间-->
                <div class="form-group">
                    <label for="startWork" class="col-sm-2 control-label">服务时间</label>
                    <div class="col-sm-2 f_left">
                        <input type="time" name="startWork" class="item form-control" id="startWork">
                    </div>
                    <label class="control-label f_left">至</label>
                    <div class="col-sm-2 f_left">
                        <input type="time" name="offWork" class="item form-control" id="offWork">
                    </div>
                    <div class="col-xs-1 f_left">
                        <input type="radio" name="weekendWork" class="item form-control weekendWork" id="weekendWork" onclick="changeRadio()">
                    </div>
                    <label class="control-label f_left red weekendWork">含周末</label>
                </div>
                <!--设置有效时间-->
                <div class="form-group">
                    <label for="setValidTime" class="col-sm-2 control-label">设置有效时间</label>
                    <div class="col-sm-2 f_left">
                        <input type="date" name="setValidTime" class="item form-control" id="setValidTime">
                    </div>
                    <label class="control-label f_left">至</label>
                    <div class="col-sm-2 f_left">
                        <input type="date" name="setIValidTime" class="item form-control" id="setIValidTime">
                    </div>
                </div>
                <!--标签-->
                <div class="form-group">
                    <label for="tag" class="col-sm-2 control-label">标签</label>
                    <div class="col-xs-1">
                        <select class="form-control item" id="tag" >
                            <option value="0">请选择标签</option>
                            <option value="1">服务好</option>
                            <option value="2">金牌保洁</option>
                            <option value="3">速度快</option>
                        </select>
                    </div>
                </div>
                <br><br><br><br>
                <!--留空防误触-->
                <div class="form-group row col-lg-1"></div>
            </form>
            <div class="form-group">
                <div class="col-lg-4"></div>
                <div class="col-xs-5">
                    <button class="btn btn-default item" id="update">修改</button>
                    <button class="btn btn-primary item" id="submit">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>